/**
 * 此文件里存放的方法为了配合页面完成某一功能 
 */

var funsJs = { 

	/**
	 * 发送验证码的倒计时  控件只能使用button ，这样可以使用button的disabled属性控制是否允许点击 
	 * @param {Object} obj  //button控件的js对象
	 * @param {int} time    //倒计时时间时长
	 * 例：
		<button id="yzm" class="sendyzm" onclick="send(this)">获取验证码</button>
		function send(obj){
			//.....code......
			jsFun.verCodeTime(obj,100);
		}
	*/
	verCodeTime:function(obj,time){
			//定义内部对象
			var Me = function(){	    	
				this.obj = obj;//DOM对象
				this.time = time;//倒计时时间
				this.ttt ="";  //循环事件
				this.init();
			}    
			
			Me.prototype = {
				init:function(){
					var me = this;

					me.obj.disabled = true;
					me.obj.innerText = this.time+"秒后重新获取";
					me.obj.style = "background-color:#ccc";
					
					me.ttt = setInterval(function(){
						me.time--;
						if(me.time==0){
							clearInterval(me.ttt);
							me.obj.disabled = false;
							me.obj.innerText = "获取验证码";
							me.obj.style = "background-color:none";
						}else{
							me.obj.innerText = me.time+"秒后重新获取";		    
						}
					},1000) 
				}
			}
			//初始化对象
			var me = new Me(obj,time);
	},



	/**
	* js配合 css连续动画,实现可控制停顿时间间隔以及播放次数的动画播放   
	* @param  {string} classname  需要动画的控件的样式名称 
	* @param  {int} time_run  一次css动画完成所需要的时间,单位毫秒，如果要连续2次动画在此时间上 * 2 
	* @param  {int} time_jiange 动画完成后到下一次动画的等待时间,单位毫秒，默认为0表连续动画
	* 注意：
		1. 此方法需要依赖coms.js中的 addClass removeClass 两个方法
		2. 注意样式命名，如果样式为 classname 那么动画名要为 classname_donghua
	
	  示例: 样式如下 默认样式为 yanjing1  动画样式为 yanjing1_donghua
	    样式
	    <style>
  	    .yanjing1{background:#ff0000;width: 150px;height: 124px;}
		.yanjing1_donghua{
            -webkit-animation-iteration-count: infinite;
		    -webkit-animation-timing-function:step-start; 
		    -webkit-animation-name: yanjing1_donghua;
		    -webkit-animation-duration: 500ms;
		}	
		@-webkit-keyframes yanjing1_donghua{
			0% {width:100px}	
			20% {width:90px}
			40% {width:70px}
			60% {width:50px}
			80% {width:30px}      
			100% {width:10px}
		}
	    </style>
		html 
		<div class="yanjing1"></div>	
		js	
		jsFun.cssAnimationControl("yanjing1",500*2,1000*2); 
	*/
	cssAnimationControl: function(classname,time_run,time_jiange){
		var _this = this;
		var obj = document.querySelector("."+classname);
		var time_jiange = time_jiange || 0;
		
		var classnamedonghua = classname+"_donghua";
		
		_this.addClass(obj,classnamedonghua);
		setTimeout(function(){
			
			//动画间隔时间
			if(time_jiange!=0){
			_this.removeClass(obj,classnamedonghua); 
			setTimeout(function(){	
				_this.cssAnimationControl(classname,time_run,time_jiange);
			},time_jiange);
			}
			
		},time_run);
	},	  

	/** 
	 * js模拟form表单提交  
	 * @param {object} 参数对象
	 *    url       必填  提交地址
	 *    methond   选填  默认post  提交方式  post  get
	 *    target    选填  默认_self  当前页面还是新页面   _self _blank
	 *              其它参数
	 * 示例： jsFun.formSubmit({"url":CONST.url,"methond":"post","target":"_blank","j_username":"SYNKMXS0000000043","j_password":"3258"});
	 */
	jsFormSubmit:function(params) {
		var turnForm = document.createElement("form");
		//一定要加入到body中！！
		document.body.appendChild(turnForm);

        var method = params['methond'] || "POST";	//默认为post
		turnForm.method = method;
		delete params['methond'];

		var target = params['target'] || "_self";	//默认为当前页面
		turnForm.target = target;
		delete params['target'];

		var url = params.url; //提交地址
		turnForm.action = url;
		delete params['url'];


		//创建隐藏表单
		for(var item in params){
			var newElement = document.createElement("input");
			newElement.setAttribute("type","hidden");
			newElement.setAttribute("name",item);
			newElement.setAttribute("value",params[item]);
			turnForm.appendChild(newElement);
		}

		turnForm.submit();
	},


	/** 
	 * js模拟a点击
	 * @param {string}  url       必填  提交地址
	 * @param {string}  target    选填  默认_self  当前页面还是新页面   _self _blank
	 */
	jsALink: function(url,target) {
		var target = target || "_blank";
		//先读取alink 不存在则创建
		var alink = document.getElementById("alink");
		if(alink==undefined)  alink=document.createElement("a");
		//赋值
		alink.id = "alink";
		alink.href = url;
		alink.target = target;
		alink.style = "display: none;";
		//写入页面
		document.body.appendChild(alink);
		//执行点击事件
		document.getElementById("alink").click();
	},




	/**
	 * js图片的预加载
	 * @param {string} sources   图片路径数组 
	 * @param {string} callback  加载完成后的回调函数
	 * 
	   示例：
			var sources = [
				"http://www.joytiger.com/uploadfile/image/20160105/20160105171917_79947.png",  
				"http://www.joytiger.com/uploadfile/image/20160105/20160105171917_65062222.png",
				"http://www.joytiger.com/uploadfile/image/20160105/20160105171917_65063.png",
			]  
			jsFun.loadImages(sources, function(errorArr,sucessArr){  
				console.log("失败：",errorArr);
			}); 
	 */
	loadImages:function(sources, callback){  
		var count = 0,imgNum=0,errorArr=[],sucessArr=[];
		//获取总数量
		for(itme in sources){  
			imgNum++;	
		}
        //循环加载
		for(itme in sources){  
			count++
			loadimg(sources[itme],count);			
		}
		//加载
		function loadimg(src,index){
			var images = new Image(); 
			images.src = src;
            if(images.complete){
				sucessArr.push(src);
				// console.log("第"+index+"张已经存在缓存中"); 
				overDo();
				return "";
			}
			images.onload = function(){ 
				sucessArr.push(src); 
				// console.log("第"+index+"张加载完成"); 
				overDo();				
				return "";
			} 		
			images.onerror = function(){ 
				errorArr.push(src);
				// console.log("第"+index+"张加载失败"); 
				overDo();
				return "";
			}
		}
		//加载完成后的回调
		function overDo(){
			if(errorArr.length+sucessArr.length == imgNum){	
				// console.log("加载完成   失败："+errorArr.length+"_____成功数量:"+sucessArr.length); 			
				callback(errorArr,sucessArr);
			}
		}
	},  

    /**
	 * js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
	 * @param {obj} config   加载资源配置 
	 * @param {string} version  资源后辍配置
	 * 
	   示例：
		jsFun.jsCssLoader({
			css: [
				'resources/resources/quizii.css',
			],
			scripts: [
				'js/quizii/language/js.js',
			]
		},new Date().getTime());
	 */
	jsCssLoader: function (config,version) {
		this.css = config.css;
		this.scripts = config.scripts;
		this.head = document.getElementsByTagName('head')[0];
	
		this.load = function() {
			this.loadCSS();
			this.loadScript();
		}
		this.loadCSS = function() {
			var that = this;
			this.css.forEach(function(csslink) {
				document.write(' <link href="' + csslink +'?ver='+ version + '" rel="stylesheet" />')
			});
		}
		this.loadScript = function() {
			var that = this;
			this.scripts.forEach(function(scriptlink){
				document.write('<script type="text/javascript" src="' + scriptlink +'?ver='+ version + '"><\/script>');
			});
		}
		this.load();
	},



	/** 
	* js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
	* 原理：利用 ajax 异步多线程快速加载， 每个文件加载完成后存入到加载完成数组中, 
	*      显示到页面时完全按传入的顺序加入到页面 
	* @param {array}    files              要加载的文件列表，显示时也按照此顺序一个一个加入到页面
	* @param {fun}      funOk              加载完成后的回调
	* @param {fun}      funPercent         加载过程中的回调
	使用示例：  
	var files = [
		'laz_word/controllers/word_set_ctrl.js?ver=31',
		'laz_word/controllers/word_set_ctrl.js?ver=31',
	];
	ajaxLoadJs(files,function(){
		console.log("====over======");     
	},function(percent,file){	 
		console.log(percent,file);
	});	
	*/    
	ajaxLoadJs : function (files,funOk,funPercent) {
		var fileData = [];//记录加载完的文件
		var oknum = 0 ; //加载完成的数量   
		//循环异步加载文件
		for (var i = 0; i < files.length; i++) {
			loadfile(files[i]);
		}
		//加载文件
		function loadfile(file) {
				$.ajax({
					url: file,
					dataType: "text",
					success: function (data) {
						oknum++;
						fileData[file] = data; //加载成功写入数组
						loadok(file);//调用成功后的处理
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						console.log("加载失败："+file)
						console.log(textStatus)
						console.log(errorThrown)                           
					}
				});
		}
	
		//加载成功后的处理
		function loadok(file) {
			//计算加载进度
			//这里加1，因为输出js文件到页面，也需要时间，加1就是把输出js的时间计为一个文件
			//这样所有文件加载完成后是 99% ，输出到页面完成后，才是 100%     
			var percent = oknum  / (files.length + 1) ; 
			if(typeof(funPercent)=="function") funPercent(percent, file);
	
			//加载完成后，按传的顺序输出js到页面
			if (oknum == files.length) {
				for (var i = 0; i < files.length; i++) {
						var script = document.createElement('script');
						script.innerHTML = fileData[files[i]];
						document.getElementsByTagName('HEAD').item(0).appendChild(script);			
				}
				if(typeof(funPercent)=="function") funPercent(1, "all"); //输出完成即认为加载完成
				
				if(typeof(funOk)=="function") funOk();	//回调完成事件
			}     
		}
	},
 




	/** 
	 *  ie不支持media的解决方案
	 *  在ie7 ie8 的情况下，浏览器窗口小于某个值时，引用专门的样式
	 *  引用方式： //使用IE7 IE8时，窗口小于1280，则调用media_ie.css
	 *  jsFun.processLowerIENavigate(1280,'css/media_ie.css'); 
	 *  
	 * @param int maxwidth    浏览器宽度
	 * @param string csspath     css路径
	 * @returns 参数值 
	 */
	processLowerIENavigate : function(maxwidth,csspath){
	   var width = document.documentElement.clientWidth;
	   var isIE = document.all ? 1 : 0;
	   if (isIE == 1 && width <= maxwidth)
	   {
	       if(navigator.userAgent.indexOf("MSIE 7.0") > 0 || navigator.userAgent.indexOf("MSIE 8.0") > 0)
	       {  
	           var link=document.createElement("link");
	           link.setAttribute("rel", "stylesheet");
	           link.setAttribute("type", "text/css");
	           link.setAttribute("id", "size-stylesheet");
	           link.setAttribute("href", csspath);
	  
	           var heads = document.getElementsByTagName("head");
	           if(heads.length)
	               heads[0].appendChild(link);
	           else
	               document.documentElement.appendChild(link);         
	          
	       }
	   } 
	},


	/** 
	* h5 js 监听网页是否切到了后台
	* @param {function}  showFun    网页显示时执行方法
	* @param {function}  hidenFun   网页隐藏时执行方法
	使用示例：
		<audio src="time.mp3" id="bofang" autoplay loop  controls="controls" >

		var audio = document.getElementById('bofang');
		jsFun.html5ShowOrHiden(function(){
			audio.play();
			console.log("显示");
		},function(){
			audio.pause()
			console.log("隐藏");
		})

	*/
	html5ShowOrHiden :function(showFun,hidenFun){
		//监听浏览器当前页面是否被激活的事件
		var hiddenProperty = 'hidden' in document ? 'hidden' :    
			'webkitHidden' in document ? 'webkitHidden' :    
			'mozHidden' in document ? 'mozHidden' :    
			null;
		var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
		var onVisibilityChange = function()
		{
			if(!document[hiddenProperty]){ 		  
			//console.log("显示");
			showFun();
			}else{
			//console.log("隐藏");
			hidenFun();
			}
		}
		document.addEventListener(visibilityChangeEvent, onVisibilityChange);
	},


		
	/** 
	* js使用canvas将文字转换成图像数据base64
	* @param {string}    text              文字内容  "abc"
	* @param {string}    fontsize          文字大小  20
	* @param {function}  fontcolor         文字颜色  "#000"
	* @param {boolean}   imgBase64Data     图像数据
	使用示例：  
	<img src="" id="show">  
	var text = "Hello World!";
	document.getElementById("show").src = jsFun.textBecomeImg(text,20,"#000");
	*/
	textBecomeImg: function (text,fontsize,fontcolor){
		var canvas = document.createElement('canvas');
		//小于32字加1  小于60字加2  小于80字加4    小于100字加6
		$buHeight = 0;
		if(fontsize <= 32){ $buHeight = 1; }
		else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
		else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
		else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
		else if(fontsize > 100 ){ $buHeight = 10;}
		canvas.height=fontsize + $buHeight ;//对于g j 等有时会有遮挡，这里增加一些高度
		var context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);// 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
		context.fillStyle = fontcolor;
		context.font=fontsize+"px Arial";
		context.textBaseline = 'middle'; //top（顶部对齐） hanging（悬挂） middle（中间对齐） bottom（底部对齐） alphabetic是默认值
		context.fillText(text,0,fontsize/2)

		//如果在这里直接设置宽度和高度会造成内容丢失 , 暂时未找到原因 , 可以用以下方案临时解决
		//canvas.width = context.measureText(text).width;


		//方案一：可以先复制内容  然后设置宽度 最后再黏贴    方案二：创建新的canvas,把旧的canvas内容黏贴过去  方案三： 上边设置完宽度后，再设置一遍文字

		//方案一： 这个经过测试有问题，字体变大后，显示不全,原因是canvas默认的宽度不够，如果一开始就给canvas一个很大的宽度的话，这个是可以的。	
		//var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //这里先复制原来的canvas里的内容	
		//canvas.width = context.measureText(text).width;  //然后设置宽和高	
		//context.putImageData(imgData,0,0); //最后黏贴复制的内容

		//方案三：改变大小后，重新设置一次文字
		canvas.width = context.measureText(text).width;
		context.fillStyle = fontcolor;
		context.font=fontsize+"px Arial";
		context.textBaseline = 'middle'; 
		context.fillText(text,0,fontsize/2)

		var dataUrl = canvas.toDataURL('image/png');//注意这里背景透明的话，需要使用png
		return dataUrl;
	},

	   
	/** 
	* js利用canvas对图像进行压缩、缩小处理
	* @param {string}    imgBase64Data     图像base64数据
	* @param {string}    maxWidth          最大高度
	* @param {function}  maxHeight         最大宽度
	* @param {boolean}   fun               回调函数，参数为处理后的图像数据
	使用示例：
	compressPhoto(imgBase64Data,maxWidth,maxHeight,function(imgBase64Data){
		//返回图片数据后的处理
	})
	*/
	compressPhoto : function (imgBase64Data,maxWidth,maxHeight,fun){
		var  img = new Image();

		// 缩放图片需要的canvas
		var canvas = document.createElement('canvas');
		var context = canvas.getContext('2d');

		// base64地址图片加载完毕后
		img.onload = function () {
			// 图片原始尺寸
			var originWidth = this.width;
			var originHeight = this.height;            
			// 目标尺寸
			var targetWidth = originWidth, targetHeight = originHeight;
			// 图片尺寸超过400x400的限制
			if (originWidth > maxWidth || originHeight > maxHeight) {
				if (originWidth / originHeight > maxWidth / maxHeight) {
					// 更宽，按照宽度限定尺寸
					targetWidth = maxWidth;
					targetHeight = Math.round(maxWidth * (originHeight / originWidth));
				} else {
					targetHeight = maxHeight;
					targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				}
			}

			// canvas对图片进行缩放
			canvas.width = targetWidth;
			canvas.height = targetHeight;
			// 清除画布
			context.clearRect(0, 0, targetWidth, targetHeight);
			// 图片压缩
			context.drawImage(img, 0, 0, targetWidth, targetHeight);

			var base=canvas.toDataURL("image/jpeg",0.7);//canvas转码为base64                
			fun(base);//这里属于一个异步操作，所以需要使用回调处理 
		};

		img.src = imgBase64Data;
	}




	


}



